<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html	xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

	<ui:composition template="template/commonTemplate.xhtml">
	
	<ui:define name="pageMetaData">
	<!-- permet de déclarer une ressource qui se trouve dans le dossier css du dossier parent resources -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" media="all" href="../css/style.css"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->		
				
		<!-- JS -->
		<script src="../js/jquery-1.7.1.min.js"></script>
		<script src="../js/custom.js"></script>
		<script src="../js/tabs.js"></script>
		<script src="../js/css3-mediaqueries.js"></script>
		<script src="../js/jquery.columnizer.min.js"></script>
		
		<!-- Isotope -->
		<script src="../js/jquery.isotope.min.js"></script>
		
		<!-- Lof slider -->
		<script src="../js/jquery.easing.js"></script>
		<script src="../js/lof-slider.js"></script>
		<link rel="stylesheet" href="../css/lof-slider.css" media="all"  /> 
		<!-- ENDS slider -->
		
		<!-- Tweet -->
		<link rel="stylesheet" href="../css/jquery.tweet.css" media="all"  /> 
		<script src="../js/tweet/jquery.tweet.js" ></script> 
		<!-- ENDS Tweet -->
		
		<!-- superfish -->
		<link rel="stylesheet" media="screen" href="../css/superfish.css" /> 
		<script  src="../js/superfish-1.4.8/js/hoverIntent.js"></script>
		<script  src="../js/superfish-1.4.8/js/superfish.js"></script>
		<script  src="../js/superfish-1.4.8/js/supersubs.js"></script>
		<!-- ENDS superfish -->
		
		<!-- prettyPhoto -->
		<script  src="../js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
		<link rel="stylesheet" href="../js/prettyPhoto/css/prettyPhoto.css"  media="screen" />
		<!-- ENDS prettyPhoto -->
		
		<!-- poshytip -->
		<link rel="stylesheet" href="../js/poshytip-1.1/src/tip-twitter/tip-twitter.css"  />
		<link rel="stylesheet" href="../js/poshytip-1.1/src/tip-yellowsimple/tip-yellowsimple.css"  />
		<script  src="../js/poshytip-1.1/src/jquery.poshytip.min.js"></script>
		<!-- ENDS poshytip -->
		
		<!-- JCarousel -->
		<script type="text/javascript" src="../js/jquery.jcarousel.min.js"></script>
		<link rel="stylesheet" media="screen" href="../css/carousel.css" /> 
		<!-- ENDS JCarousel -->
		
		<!-- GOOGLE FONTS -->
		<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'/>

		<!-- modernizr -->
		<script src="../js/modernizr.js"/>
		
		<!-- SKIN -->
		<link rel="stylesheet" media="all" href="../css/skin.css"/>
		
		<!-- Less framework -->
		<link rel="stylesheet" media="all" href="../css/lessframework.css"/>
		
		<!-- flexslider -->
		<link rel="stylesheet" href="../css/flexslider.css" />
		<script src="../js/jquery.flexslider.js"></script>
	</ui:define>
	
  	<ui:define name="styles">
  	
  	</ui:define>
  	
  	<ui:define name="title">Bustle</ui:define>
  	
  	<ui:define name="content" id="content">
		<div id="main">
			<div class="wrapper cf">
				
	    		<div id="portfolio-content" class="cf">

					<div id="project-box" class="cf">
						<div class="info"  style="margin: 30px; width: auto;">
							<h2 class="heading">Partenaires</h2><br/><br/>
							<div>
							<h:form>
        						<ui:repeat var="providerBean" value="#{providerListMBean.all}">
        							<div class="imageProduct">
        								<h:commandButton  image="../#{providerBean.image}" action="#{providerBean.show}">
        								  <f:setPropertyActionListener value="#{providerBean.id}" target="#{providerMBean.id}" />
							              <f:setPropertyActionListener value="#{providerBean.name}" target="#{providerMBean.name}" />
							              <f:setPropertyActionListener value="#{providerBean.phoneNumber}" target="#{providerMBean.phoneNumber}" />
							              <f:setPropertyActionListener value="#{providerBean.description}" target="#{providerMBean.description}" />
							              <f:setPropertyActionListener value="#{providerBean.image}" target="#{providerMBean.image}" />
							              <f:setPropertyActionListener value="#{providerBean.addressBean.name}" target="#{providerMBean.addressBean.name}" />
							              <f:setPropertyActionListener value="#{providerBean.addressBean.postCode}" target="#{providerMBean.addressBean.postCode}" />
							              <f:setPropertyActionListener value="#{providerBean.addressBean.city}" target="#{providerMBean.addressBean.city}" />
        								</h:commandButton>
        							</div>
        							<div class="contenuProduct">
        								<h:outputText value="#{providerBean.name}" class="nameProduct"></h:outputText>
        								<br/><br/>
        								<h:outputText value="#{providerBean.email}"></h:outputText>
        								<br/>
        								<h:outputText value="#{providerBean.phoneNumber}"></h:outputText>
        								<br/>
        								<h:outputText value="#{providerBean.description}"></h:outputText>
        								<br/>
			        					<h:outputText value="#{providerBean.addressBean.name}"></h:outputText>
			        					<br/>
			        					<h:outputText value="#{providerBean.addressBean.postCode}"></h:outputText>
			        					<br/>
			        					<h:outputText value="#{providerBean.addressBean.city}"></h:outputText>
	        						</div>
	        					</ui:repeat>
	        				</h:form>
				        	</div>
		        		</div>
		        	</div>

		        </div>
			
			</div>
		</div>
  	</ui:define>
  	
</ui:composition>
</html>